<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单列表</title>
  <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">

</head>
<body>
<!-- 内容主体区域 -->
<div style="padding: 30px;">
    <div class="layui-row layui-col-space15" >
    <div class="layui-panel" style="padding: 10px;height: 40px">
    <form action="/amin/menu/getMenuList">
      <div class="layui-col-md3">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-inline">
          <input type="text" name="menuName" id="menuName" th:field="${menu.menuName}" placeholder="请输入" autocomplete="off" class="layui-input layui-input-width">
        </div>
      </div>
      <div class="layui-col-md3">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSubmit">查询</button>
        </div>
      </div>
    </form>
    </div>
  </div>

    <br>
    <div id="addButton" class="layui-col-md12" style="margin-top: 10px;">
        <button data-method="addData" class="layui-btn">添加</button>
    </div>
  <div class="layui-col-md12">
    <table class="layui-table" lay-filter="demo" id="tebleList">
      <thead>
      <tr>
        <th>序号</th>
        <th>菜单名称</th>
        <th>菜单类型</th>
        <th>菜单链接</th>
        <th>打开方式</th>
        <th>跳转方式</th>
        <th>创建时间</th>
        <th>管理</th>
      </tr>
      </thead>
      <tbody th:each="menuList,menuListStat:${menuList.list}">
      <tr>
        <td th:text="${menuListStat.index+1}"></td>
        <td th:text="${menuList.menuName}"></td>
        <td >
            <button th:each="dictState,dictStateStat:${systemMenuType}" th:if="${menuList.menuType == dictState.dictKey}" th:text="${dictState.dictTitle}" th:class="${dictState.dictStyle}"></button>
        </td>
        <td th:text="${menuList.menuHref}"></td>
        <td th:text="${menuList.openType == 'home-page' ? '站内' : '网页'}"></td>
        <td th:text="${menuList.jumpMode == 0 ? '本站' : '外站'}"></td>
        <td th:text="${#dates.format(menuList.createdTime,'yyyy-MM-dd')}"></td>
        <td >
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" >添加</button>
            <button  th:data-value="${menuList.id}"   data-method="editData" class="layui-btn layui-btn-sm layui-btn-normal">编辑</button>
            <button  th:data-value="${menuList.id}"   data-method="delData" class="layui-btn layui-btn-sm layui-btn-normal layui-bg-red">删除</button>
        </td >
      </tr>
      </tbody>
    </table>
      <div class="layui-box layui-laypage layui-laypage-molv" id="page_up_next">
          <button type="button" th:data-value="${menuList.pageNum -1}" data-method="upPage" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">上一页</button>
          <button type="button" th:data-value="${menuList.pageNum +1}" data-method="nextPage" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">下一页</button>
      </div>
      &emsp;&emsp;总<span th:text="${menuList.total}"></span>条
  </div>
</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <script>
  layui.use(function(){
    var layer = layui.layer
            ,form = layui.form,table = layui.table;
      var href = "/amin/menu/createMenu";
      var pageUrl = '/amin/menu/getMenuList?pageNum=';
      var id = 0;
      var pageNum = 1;
      var active = {
          addData: function(){
              var that = this;
              //多窗口模式，层叠置顶
              layer.open({
                  type: 2 //此处以iframe举例
                  ,title: '添加菜单'
                  ,area: ['100%', '100%']
                  ,shade: 0
                  ,maxmin: true
                  ,offset: [ //为了演示，随机坐标
                      0,0
                  ]
                  ,content: href
                  ,zIndex: layer.zIndex //重点1
                  ,success: function(layero, index){
                      layer.addData(layero); //重点2. 保持选中窗口置顶

                      //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                      layer.escIndex = layer.escIndex || [];
                      layer.escIndex.unshift(index);
                      //选中当前层时，将当前层索引放置在首位
                      layero.on('mousedown', function(){
                          var _index = layer.escIndex.indexOf(index);
                          if(_index !== -1){
                              layer.escIndex.splice(_index, 1); //删除原有索引
                          }
                          layer.escIndex.unshift(index); //将索引插入到数组首位
                      });
                  }
                  ,end: function(){
                      //更新索引
                      if(typeof layer.escIndex === 'object'){
                          layer.escIndex.splice(0, 1);
                      }
                  }
              });
          }
          ,editData: function(){
              var that = this;
              //多窗口模式，层叠置顶
              layer.open({
                  type: 2 //此处以iframe举例
                  ,title: '编辑菜单'
                  ,area: ['100%', '100%']
                  ,shade: 0
                  ,maxmin: true
                  ,offset: [ //为了演示，随机坐标
                      0,0
                  ]
                  ,content: href+"?id="+id
                  ,zIndex: layer.zIndex //重点1
                  ,success: function(layero, index){
                      layer.editData(layero); //重点2. 保持选中窗口置顶
                      //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                      layer.escIndex = layer.escIndex || [];
                      layer.escIndex.unshift(index);

                      //选中当前层时，将当前层索引放置在首位
                      layero.on('mousedown', function(){
                          var _index = layer.escIndex.indexOf(index);
                          if(_index !== -1){
                              layer.escIndex.splice(_index, 1); //删除原有索引
                          }
                          layer.escIndex.unshift(index); //将索引插入到数组首位
                      });
                  }
                  ,end: function(){
                      //更新索引
                      if(typeof layer.escIndex === 'object'){
                          layer.escIndex.splice(0, 1);
                      }
                  }
              });
          },delData: function(){
              var that = this;
              layer.confirm('确定要删除这条数据吗?', {icon: 3, title:'提示'}, function(index){
                  window.location.href =window.document.location.origin+"/amin/menu/delById?id="+id;
                  layer.close(index);
              });
          },upPage: function(){
              if(null != $("#menuName").val()){
                  pageNum =pageNum+"&menuName="+$("#menuName").val();
              }
              var that = this;
              window.location.href =window.document.location.origin+pageUrl+pageNum ;
          },nextPage: function(){
              if(null != $("#menuName").val()){
                  pageNum = pageNum+"&menuName="+$("#menuName").val();
              }
              var that = this;
              window.location.href =window.document.location.origin+pageUrl+pageNum ;
          }
      };

      $('#addButton .layui-btn').on('click', function(){
          var othis = $(this), method = othis.data('method');
          active[method] ? active[method].call(this, othis) : '';
      });
      $('#tebleList .layui-btn').on('click', function(){
          var othis = $(this), method = othis.data('method');
          id = othis.data('value');
          active[method] ? active[method].call(this, othis) : '';
      });
      $('#page_up_next .layui-btn').on('click', function(){
          var othis = $(this), method = othis.data('method');
          pageNum = othis.data('value');
          active[method] ? active[method].call(this, othis) : '';
      });
      //监听提交
      form.on('submit(formSubmit)', function(data){
          //layer.msg(JSON.stringify(data.field));
          return true;
      });

  });
</script>
</html>